home *** CD-ROM | disk | FTP | other *** search
/ Personal Computer World 2006 May / PCWMAY06.iso / Software / Freeware / First Page 2006 3.00 / fp2006-final-3.00-setup.exe / {app} / Iscripts / Date & Calendars / basic-cal.izs < prev    next >
Text File  |  2005-07-11  |  7KB  |  268 lines
  1. <!NOWIZARD>
  2.  
  3. <!TITLE>Basic Calendar 
  4. <!/TITLE>
  5.  
  6. <!DESCRIPTION>This calender shows the month that we are in and highlights the day we are on.<!/DESCRIPTION> 
  7.  
  8. <!CATEGORY>calenders<!/CATEGORY>
  9.  
  10. <!SCRIPT>
  11. <!-- START OF SCRIPT -->
  12. <!-- TWO STEPS TO INSTALL THIS SCRIPT -->
  13.  
  14. <!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js     -->
  15.  
  16.  
  17. <!-- Begin
  18. //  SET ARRAYS
  19. var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
  20. var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  21.  
  22. //  DECLARE AND INITIALIZE VARIABLES
  23. var Calendar = new Date();
  24.  
  25. var year = Calendar.getYear();        // Returns year
  26. var month = Calendar.getMonth();    // Returns month (0-11)
  27. var today = Calendar.getDate();    // Returns day (1-31)
  28. var weekday = Calendar.getDay();    // Returns day (1-31)
  29.  
  30. var DAYS_OF_WEEK = 7;    // "constant" for number of days in a week
  31. var DAYS_OF_MONTH = 31;    // "constant" for number of days in a month
  32. var cal;    // Used for printing
  33.  
  34. Calendar.setDate(1);    // Start the calendar day at '1'
  35. Calendar.setMonth(month);    // Start the calendar month at now
  36.  
  37.  
  38. /* VARIABLES FOR FORMATTING
  39. NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
  40.       tags to customize your caledanr's look. */
  41.  
  42. var TR_start = '<TR>';
  43. var TR_end = '</TR>';
  44. var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
  45. var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
  46. var TD_start = '<TD WIDTH="30"><CENTER>';
  47. var TD_end = '</CENTER></TD>';
  48.  
  49. /* BEGIN CODE FOR CALENDAR
  50. NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
  51. tags to customize your calendar's look.*/
  52.  
  53. cal =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
  54. cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
  55. cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';
  56. cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
  57. cal += TR_start;
  58.  
  59. //   DO NOT EDIT BELOW THIS POINT  //
  60.  
  61. // LOOPS FOR EACH DAY OF WEEK
  62. for(index=0; index < DAYS_OF_WEEK; index++)
  63. {
  64.  
  65. // BOLD TODAY'S DAY OF WEEK
  66. if(weekday == index)
  67. cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;
  68.  
  69. // PRINTS DAY
  70. else
  71. cal += TD_start + day_of_week[index] + TD_end;
  72. }
  73.  
  74. cal += TD_end + TR_end;
  75. cal += TR_start;
  76.  
  77. // FILL IN BLANK GAPS UNTIL TODAY'S DAY
  78. for(index=0; index < Calendar.getDay(); index++)
  79. cal += TD_start + '  ' + TD_end;
  80.  
  81. // LOOPS FOR EACH DAY IN CALENDAR
  82. for(index=0; index < DAYS_OF_MONTH; index++)
  83. {
  84. if( Calendar.getDate() > index )
  85. {
  86.   // RETURNS THE NEXT DAY TO PRINT
  87.   week_day =Calendar.getDay();
  88.  
  89.   // START NEW ROW FOR FIRST DAY OF WEEK
  90.   if(week_day == 0)
  91.   cal += TR_start;
  92.  
  93.   if(week_day != DAYS_OF_WEEK)
  94.   {
  95.  
  96.   // SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
  97.   var day  = Calendar.getDate();
  98.  
  99.   // HIGHLIGHT TODAY'S DATE
  100.   if( today==Calendar.getDate() )
  101.   cal += highlight_start + day + highlight_end + TD_end;
  102.  
  103.   // PRINTS DAY
  104.   else
  105.   cal += TD_start + day + TD_end;
  106.   }
  107.  
  108.   // END ROW FOR LAST DAY OF WEEK
  109.   if(week_day == DAYS_OF_WEEK)
  110.   cal += TR_end;
  111.   }
  112.  
  113.   // INCREMENTS UNTIL END OF THE MONTH
  114.   Calendar.setDate(Calendar.getDate()+1);
  115.  
  116. }// end for loop
  117.  
  118. cal += '</TD></TR></TABLE></TABLE>';
  119.  
  120. //  PRINT CALENDAR
  121. document.write(cal);
  122.  
  123. //  End -->
  124.  
  125.  
  126.  
  127. <!--  STEP TWO: Place this into the BODY of the HTML document where you want the calendar  -->
  128. <!--  Make sure the '.js' and '.html' files are in the same directory.  -->
  129.  
  130. <BODY>
  131.  
  132. <SCRIPT SRC="calendar.js"></SCRIPT>
  133.  
  134.  
  135. <!-- END OF SCRIPT -->
  136. <!/SCRIPT>
  137.  
  138. <!PREVIEW>
  139. <!-- START OF SCRIPT -->
  140.  
  141.  
  142. <!-- TWO STEPS TO INSTALL THIS SCRIPT -->
  143.  
  144. <!-- STEP ONE: Place the following script into a separate JavaScript file called: calendar.js     -->
  145.  
  146.  
  147. <!-- Begin
  148. //  SET ARRAYS
  149. var day_of_week = new Array('Sun','Mon','Tue','Wed','Thu','Fri','Sat');
  150. var month_of_year = new Array('January','February','March','April','May','June','July','August','September','October','November','December');
  151.  
  152. //  DECLARE AND INITIALIZE VARIABLES
  153. var Calendar = new Date();
  154.  
  155. var year = Calendar.getYear();        // Returns year
  156. var month = Calendar.getMonth();    // Returns month (0-11)
  157. var today = Calendar.getDate();    // Returns day (1-31)
  158. var weekday = Calendar.getDay();    // Returns day (1-31)
  159.  
  160. var DAYS_OF_WEEK = 7;    // "constant" for number of days in a week
  161. var DAYS_OF_MONTH = 31;    // "constant" for number of days in a month
  162. var cal;    // Used for printing
  163.  
  164. Calendar.setDate(1);    // Start the calendar day at '1'
  165. Calendar.setMonth(month);    // Start the calendar month at now
  166.  
  167.  
  168. /* VARIABLES FOR FORMATTING
  169. NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
  170.       tags to customize your caledanr's look. */
  171.  
  172. var TR_start = '<TR>';
  173. var TR_end = '</TR>';
  174. var highlight_start = '<TD WIDTH="30"><TABLE CELLSPACING=0 BORDER=1 BGCOLOR=DEDEFF BORDERCOLOR=CCCCCC><TR><TD WIDTH=20><B><CENTER>';
  175. var highlight_end   = '</CENTER></TD></TR></TABLE></B>';
  176. var TD_start = '<TD WIDTH="30"><CENTER>';
  177. var TD_end = '</CENTER></TD>';
  178.  
  179. /* BEGIN CODE FOR CALENDAR
  180. NOTE: You can format the 'BORDER', 'BGCOLOR', 'CELLPADDING', 'BORDERCOLOR'
  181. tags to customize your calendar's look.*/
  182.  
  183. cal =  '<TABLE BORDER=1 CELLSPACING=0 CELLPADDING=0 BORDERCOLOR=BBBBBB><TR><TD>';
  184. cal += '<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=2>' + TR_start;
  185. cal += '<TD COLSPAN="' + DAYS_OF_WEEK + '" BGCOLOR="#EFEFEF"><CENTER><B>';
  186. cal += month_of_year[month]  + '   ' + year + '</B>' + TD_end + TR_end;
  187. cal += TR_start;
  188.  
  189. //   DO NOT EDIT BELOW THIS POINT  //
  190.  
  191. // LOOPS FOR EACH DAY OF WEEK
  192. for(index=0; index < DAYS_OF_WEEK; index++)
  193. {
  194.  
  195. // BOLD TODAY'S DAY OF WEEK
  196. if(weekday == index)
  197. cal += TD_start + '<B>' + day_of_week[index] + '</B>' + TD_end;
  198.  
  199. // PRINTS DAY
  200. else
  201. cal += TD_start + day_of_week[index] + TD_end;
  202. }
  203.  
  204. cal += TD_end + TR_end;
  205. cal += TR_start;
  206.  
  207. // FILL IN BLANK GAPS UNTIL TODAY'S DAY
  208. for(index=0; index < Calendar.getDay(); index++)
  209. cal += TD_start + '  ' + TD_end;
  210.  
  211. // LOOPS FOR EACH DAY IN CALENDAR
  212. for(index=0; index < DAYS_OF_MONTH; index++)
  213. {
  214. if( Calendar.getDate() > index )
  215. {
  216.   // RETURNS THE NEXT DAY TO PRINT
  217.   week_day =Calendar.getDay();
  218.  
  219.   // START NEW ROW FOR FIRST DAY OF WEEK
  220.   if(week_day == 0)
  221.   cal += TR_start;
  222.  
  223.   if(week_day != DAYS_OF_WEEK)
  224.   {
  225.  
  226.   // SET VARIABLE INSIDE LOOP FOR INCREMENTING PURPOSES
  227.   var day  = Calendar.getDate();
  228.  
  229.   // HIGHLIGHT TODAY'S DATE
  230.   if( today==Calendar.getDate() )
  231.   cal += highlight_start + day + highlight_end + TD_end;
  232.  
  233.   // PRINTS DAY
  234.   else
  235.   cal += TD_start + day + TD_end;
  236.   }
  237.  
  238.   // END ROW FOR LAST DAY OF WEEK
  239.   if(week_day == DAYS_OF_WEEK)
  240.   cal += TR_end;
  241.   }
  242.  
  243.   // INCREMENTS UNTIL END OF THE MONTH
  244.   Calendar.setDate(Calendar.getDate()+1);
  245.  
  246. }// end for loop
  247.  
  248. cal += '</TD></TR></TABLE></TABLE>';
  249.  
  250. //  PRINT CALENDAR
  251. document.write(cal);
  252.  
  253. //  End -->
  254.  
  255.  
  256.  
  257. <!--  STEP TWO: Place this into the BODY of the HTML document where you want the calendar  -->
  258. <!--  Make sure the '.js' and '.html' files are in the same directory.  -->
  259.  
  260. <BODY>
  261.  
  262. <SCRIPT SRC="calendar.js"></SCRIPT>
  263.  
  264.  
  265. <!-- END OF SCRIPT -->
  266. <!/PREVIEW>
  267.  
  268. <!RELATED>NONE<!/RELATED>